<template>
  <el-row class="header-content bg-default">
    <el-col :span="6" :offset="2">
      <div class="grid-content">
        <img class='img-logo' src="../../src/common/images/favicon.png"/>
        <span class="span-title">{{ title }}</span></div>
    </el-col>
    <el-col :span="8" :offset="6">
      <div class="grid-content">
        <el-button class="btn-logout" size="mini" @click="logout" >{{$getTextByLangKey('退出')}}</el-button>
        <span class="span-user">{{ userName }} : {{ userRole }}</span></div>
    </el-col>
  </el-row>
</template>
<script>

  import util from '@/common/js/util'

  export default {
    name: "header-component",
    data() {
      return {
        // title:"SMT防错料系统",
        title:"",
        userName: "admin",
        userRole: this.$getTextByLangKey("超级管理员")
      }
    },
    methods: {

//      logout:function () {
//        console.log('eeeeeee')
//        localStorage.removeItem("username")
//        console.log(localStorage.getItem('username'))
//        util.linkToPath('/login')
//      }
    }
  }

</script>

<style scoped>



  .header-content{
    min-height: 80px;
    line-height: 80px;

  }

  .bg-default {
    background: rgb(238,241,246);
  }

  .img-logo{
    position: absolute;
    width: 36px;
    height: 36px;
    top:50%;
    transform: translate(0,-50%);
    /*transform: scale(0.5);*/

  }

  .span-title{
    margin-left: 46px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing:2px
  }

  .span-user{
    float: right;

  }
  .btn-logout{
    float: right;
    vertical-align:middle;
    margin-top: 25px;
    margin-left:5px;
  }
</style>
